<template>
    <div class="report-second-child">
        <div class="report-second-child-title">
            <div style="float:left">
                <div style="line-height:55px;">
                    <span style="color:#212121;font-size:20px;">{{partTitle}}</span>
                </div>
            </div>
            <div style="float:right;margin-right:10px;line-height:55px;">


                <a href="">
                    <span style="color:#fd4c5d;font-size:14px;">
                        更多<i class="el-icon-arrow-right"></i>
                    </span>
                </a>
            </div>
        </div>

        <div class="report-second-child-2">
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters style="background-color:blue" v-if="res.length>0" :video-info="res[0]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>1" :video-info="res[1]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>2" :video-info="res[2]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>3" :video-info="res[3]"></showHoverMaskWithOutCharacters>
            </div>
        </div>

        <div class="report-second-child-2">
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>4" :video-info="res[4]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>5" :video-info="res[5]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>6" :video-info="res[6]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>7" :video-info="res[7]"></showHoverMaskWithOutCharacters>
            </div>
        </div>

        <div class="report-second-child-2">
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>8" :video-info="res[8]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>9" :video-info="res[9]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>10" :video-info="res[10]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="report-second-child-4">
                <showHoverMaskWithOutCharacters v-if="res.length>11" :video-info="res[11]"></showHoverMaskWithOutCharacters>
            </div>
        </div>
    </div>
</template>

<script>
    import showHoverMaskWithOutCharacters from "@/components/showHoverMaskWithOutCharacters";

    export default {
        components:{showHoverMaskWithOutCharacters},
        name: 'reportSecondChild',
        props: {
            reportIndex: {   // 可选字段，有默认值
                type: Number
            }
        },
        data () {
            return {
                paigangbangForm:{
                    fenquParent:''
                },
                res:[],
                partTitle:''
            }
        },
        mounted(){
            var self = this;
            if(self.reportIndex===1){
                // debugger;
                self.paigangbangForm.fenquParent = "01";
                self.partTitle = '番剧';
                //查找该区前9的视频
                self.$api.get('video-service/videoController/getVideoInfoTop12ByFenquParent',self.paigangbangForm, result => {
                    self.res = result;
                });
            }

            if(self.reportIndex===2){
                self.paigangbangForm.fenquParent = "02";
                self.partTitle = '电视剧';
                //查找该区前9的视频
                self.$api.get('video-service/videoController/getVideoInfoTop12ByFenquParent',self.paigangbangForm, result => {
                    self.res = result;
                });
            }

            if(self.reportIndex===3){
                self.paigangbangForm.fenquParent = "03";
                self.partTitle = '电影';
                //查找该区前9的视频
                self.$api.get('video-service/videoController/getVideoInfoTop12ByFenquParent',self.paigangbangForm, result => {
                    self.res = result;
                });
            }

            if(self.reportIndex===4){
                self.paigangbangForm.fenquParent = "04";
                self.partTitle = '音乐';
                //查找该区前9的视频
                self.$api.get('video-service/videoController/getVideoInfoTop12ByFenquParent',self.paigangbangForm, result => {
                    self.res = result;
                });
            }

            if(self.reportIndex===5){
                self.paigangbangForm.fenquParent = "05";
                self.partTitle = '宅舞';
                //查找该区前9的视频
                self.$api.get('video-service/videoController/getVideoInfoTop12ByFenquParent',self.paigangbangForm, result => {
                    self.res = result;
                });
            }

            if(self.reportIndex===6){
                self.paigangbangForm.fenquParent = "06";
                self.partTitle = '综艺';
                //查找该区前9的视频
                self.$api.get('video-service/videoController/getVideoInfoTop12ByFenquParent',self.paigangbangForm, result => {
                    self.res = result;
                });
            }

            if(self.reportIndex===7){
                self.paigangbangForm.fenquParent = "07";
                self.partTitle = 'ASMR';
                //查找该区前9的视频
                self.$api.get('video-service/videoController/getVideoInfoTop12ByFenquParent',self.paigangbangForm, result => {
                    self.res = result;
                });
            }

            if(self.reportIndex===8){
                self.paigangbangForm.fenquParent = "08";
                self.partTitle = '电子歌姬';
                //查找该区前9的视频
                self.$api.get('video-service/videoController/getVideoInfoTop12ByFenquParent',self.paigangbangForm, result => {
                    self.res = result;
                });
            }

            if(self.reportIndex===9){
                self.paigangbangForm.fenquParent = "09";
                self.partTitle = '纪录片';
                //查找该区前9的视频
                self.$api.get('video-service/videoController/getVideoInfoTop12ByFenquParent',self.paigangbangForm, result => {
                    self.res = result;
                });
            }

            if(self.reportIndex===10){
                self.paigangbangForm.fenquParent = "10";
                self.partTitle = '声优';
                //查找该区前9的视频
                self.$api.get('video-service/videoController/getVideoInfoTop12ByFenquParent',self.paigangbangForm, result => {
                    self.res = result;
                });
            }
        }
    }
</script>

<style scoped>
    .report-second-child{
        width:670px;
        height:570px;
    }

    .report-second-child-title{
        height:60px;
        width:664px;
    }

    .report-second-child-1{
        width:668px;
        height:300px;
    }

    .report-second-child-2{
        width:668px;
        height:165px;
    }

    .report-second-child-3{
        width:334px;
        height:320px;
        float:left;
    }

    .report-second-child-4{
        width:167px;
        min-height:150px;
        float:left;
        /*background-color:blue;*/
    }
    .import-href{
        color:#333333;
        font-size:14px;
        margin-right:50px;
        cursor: pointer;
    }

    .import-href:hover{
        color:#fd4c5a;
    }

</style>
